<template>
	<view class="page mine">
		<view class="content" @click="onModifyInfo()">
			<head-image :name="userInfo.nickname" :url="userInfo.headImageThumb" :size="160"></head-image>
			<view class="info-item">
				<view class="info-primary">
					<text class="info-username">
						{{userInfo.username}}
					</text>
					<text v-show="userInfo.sex==0" class="iconfont icon-man" color="darkblue"></text>
					<text v-show="userInfo.sex==1" class="iconfont icon-girl" color="darkred"></text>
				</view>
				<!-- 	<text>
					昵称 ：{{userInfo.nickname}}
				</text> -->
				<!-- <text>
					签名 ：{{userInfo.signature}}
				</text> -->
			</view>
			<view class="info-arrow">></view>
		</view>
		<view class="line"></view>
		<view class="data-container">
			<view class="data-block">
				<text class="data-value">{{lost}}</text>
				<text class="data-title">丢失中</text>

			</view>
			<view class="divider"></view>
			<view class="data-block">
				<text class="data-value">{{found}}</text>
				<text class="data-title">已找回</text>

			</view>
			<view class="divider"></view>
			<view class="data-block">

				<text class="data-value">{{unclaimed}}</text>
				<text class="data-title">未认领</text>
			</view>
		</view>

		<uni-list style="width: 100%;" class="list-group" :border="true">
			<uni-list-item title="我的发布" ellipsis="1" link="navigateTo" @click="to_myItems"></uni-list-item>
			<!-- <uni-list-item title="个人信息" ellipsis="1" clickable="true"  show-arrow="true"  @click="showDrawer('showLeft')"></uni-list-item> -->
			<!-- <uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
					 <view class="mask-content1">
				 
				
				        <button class="a" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" hover-class="btn-hover">
				            <image class="tijiao" :src="user.headImage == '' ? '../../images/xingqiu.png' : user.headImage"></image>
				        </button>
				        <view class="b">
				            <input @change="nickname" type="nickname" placeholder="请输入昵称" maxlength="5" v-model="user.nickname" />
				        </view>
				        <view style="font-size: 24rpx; color: rgb(175, 175, 175); margin-left: 50rpx; margin-top: 30rpx">*点击头像或昵称进行注册或更改</view>
				        <view class="button" @tap="submit">确认</view>
				    </view>
				<view class="close">
					<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
				</view>
			</uni-drawer> -->
			<uni-list-item title="免责申明" link="navigateTo" @click="to_mianzhe()"></uni-list-item>
		</uni-list>
		<view v-if="isLogin==true" class="btn-group">
			<button class="btn" type="primary" @click="onModifyPassword()">修改密码</button>
			<button class="btn" type="warn" @click="onQuit()">退出</button>
		</view>
		<view v-else>
			<button class="btn" type="primary" @click="onLogin()">登录</button>
		</view>
	</view>








</template>

<script>
	// pages/user/user.js

	const defaultAvatarUrl = '/static/images/xingqiu.png';
	const app = getApp();
	import UNI_APP from '@/.env.js'
	const baseUrl = UNI_APP.BASE_URL
	export default {
		data() {
			return {
				avatarUrl: defaultAvatarUrl,
				// user:{},
				found: 0,
				lost: 0,
				unclaimed: 0,
				show: false,
				// isLogin: false
				showLeft: false
			};
		}

		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad(options) {
			this.getData();
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			this.getData();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			onModifyInfo() {
				uni.navigateTo({
					url: "/pages/user/mine-edit"
				})
			},
			onModifyPassword() {
				uni.navigateTo({
					url: "/pages/user/mine-password"
				})
			},
			onQuit() {

				uni.showModal({
					title: '确认退出?',
					success: (res) => {
						if (res.confirm) {

							uni.removeStorageSync("loginInfo")
							var userId = this.userInfo.id
							console.log(userId)
							let key = "chats-" + userId;
							uni.removeStorageSync(key)
							// userInfo = {}
							this.$store.commit("setUserInfo", {})
							getApp().exit()
						}
					}
				});
			},
			onLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			getData() {
				this.$http({
					url: baseUrl + '/getMyItemData',
					method: 'GET'
				}).then((res) => {
					console.log(res)
					this.found = res.found
					this.lost = res.lost
					this.unclaimed = res.unclaimed
				}).catch((err) => {
					console.log("获取ItemData失败")
				})
			},

			async login() {
				this.getOpenid().then((res) => {
					var openid = uni.getStorageSync('openid');
					wxLogin(openid).then((res) => {
						uni.showToast({
							title: '登录成功'
						});
						uni.setStorageSync('user', res.data);
						uni.setStorageSync('loginInfo', res.data);
						this.$store.commit("setUserInfo", res.data)
						this.$store.commit("setIsLogin", true)
						this.user = res.data

					});
				});
			},



			to_info() {
				uni.navigateTo({
					url: '/pages/info/info'
				});
			},

			to_myItems() {
				uni.navigateTo({
					url: '/pages/myItems/myItems'
				});
			},

			to_mianzhe() {
				uni.navigateTo({
					url: '/pages/mianzhe/mianzhe'
				});
			}
		},
		computed: {
			userInfo() {
				console.log("user页面：", this.$store.state.userStore.userInfo);
				return this.$store.state.userStore.userInfo;
			},
			isLogin() {
				console.log("计算isLogin:", this.$store.state.userStore.isLogin);
				return this.$store.state.userStore.isLogin;
			}
		}
	}
</script>
<style scoped lang="less">
	/* pages/user/user.wxss */

	.mine {

		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 40rpx;
						font-weight: 600;
					}

					.icon-man {
						color: darkblue;
					}

					.icon-girl {
						color: darkred;
					}
				}
			}

			.info-arrow {
				width: 50rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.line {
			margin: 20rpx;
			border-bottom: 1px solid #aaaaaa;
		}

		.btn-group {

			margin: 100rpx;

			.btn {
				margin-top: 20rpx;
			}

		}

		.list-group {
			margin-top: 100rpx;
		}

	}



	.data-container {

		margin-bottom: 30rpx;
		display: flex;

		.data-block {
			text-align: center;
			margin-right: 10rpx;
			width: 30%;
		}

		.data-title {
			display: block;
			font-size: 38rpx;
			color: rgb(160, 189, 189);
		}

		.data-value {
			display: block;
			font-size: 36rpx;
			font-weight: bold;
		}

		.divider {
			width: 1rpx;
			height: 40rpx;
			background-color: #ccc;
			margin: 20rpx;
		}
	}
</style>